<template>
  <div class="roster-container overview">
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          
<div class="selecte-title" @click="selectOrg">{{currentOrg}}</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
        <Icon type="ios-calendar-outline" size="20" />
 <DatePicker type="month" placeholder="请选择" clearable @on-clear="clearDate" @on-change="dateChange" class="ml12" style="width: 200px"></DatePicker>
 <Select
          v-model="employee_name"
          filterable
          remote
          :remote-method="searchByName"
          :loading="loading1"
          @on-change="addSelectName"
          style="width:200px"
          placeholder="姓名"
          clearable
          @on-clear="clearName"
        >
          <Option
            v-for="(option, index) in nameOptions"
            :value="option.value"
            :key="index"
          >{{option.label}}</Option>
        </Select>

      </div>
      <!-- <div class="right flex">
        <Button type="success" class="add-btn" @click="sync">同步本月考勤人员</Button>
        <Dropdown style="margin-left: 20px">
          <Button class="more-btn">
            >
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>导入历史考勤</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div> -->
    </div>

    <!-- 出勤人数 -->
    <!-- <div class="work-number">
      <a href class="num active">出勤3人</a>
      <a href class="num">出勤3人</a>
      <a href class="num">出勤3人</a>
    </div> -->

    <!-- 表格区域 -->
    <div class="table-section">
      <div class="tab-header-info flex">
        <div class="header-info-lefe flex">
          <ColorBar/>
        </div>
        <div class="header-info-right">
          <ul class="table-actions flex">
            <li class="table-action-item">
              刷新
              <Icon type="ios-refresh" size="18" />
            </li>
            <!-- <li class="table-action-item" @click="triggerTableTitle">选择表头</li>
            <li class="table-action-item">
              <Dropdown>
                <div>
                  按部门排序
                  <Icon type="ios-arrow-down"></Icon>
                </div>
                <DropdownMenu slot="list">
                  <DropdownItem>按岗位职级排序</DropdownItem>
                  <DropdownItem>按最早入职排序</DropdownItem>
                  <DropdownItem>按最近入职排序</DropdownItem>
                  <DropdownItem>工号升序</DropdownItem>
                  <DropdownItem>工号降序</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-wrap">
        <Table width="100%" :columns="columns" :data="list" class="table4 mt32" :loading="tableLoading"></Table>

        <!-- 自定义表头 -->
        <div class="table-header-title none" :class="{tableTitleShowed:openTableTitle}">
          <div class="title-showed">
            <div class="table-header-item">
              <div class="header-row">
                <div class="table-item-title">已显示表头</div>
                <div class="desc">
                  可
                  <i>拖拽</i>表头调整显示顺序
                </div>
              </div>
              <div class="btns-wrap flex">
                <Button disabled class="btn-item-disabled">姓名</Button>
                <Button disabled type="primary" class="btn-item-disabled">头像</Button>
                <div class="selecte-btn btn-item">
                  <div class="btn-title">成员关系</div>
                  <Icon type="ios-close" size="18" class="delelte-btn" />
                </div>
              </div>
            </div>
            <div class="table-header-item table-header-item3">
              <div class="header-row">
                <div class="table-item-title">未选择表头</div>
                <!-- <div class="desc">
                  可
                  <i>拖拽</i>表头调整显示顺序
                </div>-->
              </div>
              <div class="btns-container flex">
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>

                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
              </div>
            </div>
          </div>

          <div class="footer-btns">
            <Button class="cancle-btn" @click="cancleTableTitle">取消</Button>
            <Button type="primary" class="save-btn" @click="saveTableTitle">保存</Button>
          </div>
        </div>
      </div>
    </div>

    
     <!-- modal -->
    <Modal v-model="selectModal" width="720" class="selecte-modal org-modal">
      <p slot="header" style="font-weight:bold;">选择部门</p>
      <div class="m-c-content flex-box">
        <div class="selecte-modal-left">
          <Tabs value="name1" name="tab2">
            <TabPane label="选择部门" tab="tab2" name="name1">
              <div class="tab-content">
                <!-- <Input search placeholder="搜索员工姓名" class="search-inp" /> -->
                <ul class="lately-group">
                  <li class="lately-item flex-box">
                    <label for>
                      <Checkbox @on-change="selectAll" v-model="all">
                        <div class="right-info flex-box">全选</div>
                      </Checkbox>
                    </label>
                  </li>
                  <li class="lately-item flex-box" v-for="(item,index) in orgList" :key="index">
                    <label for>
                      <Checkbox v-model="item.checked" @on-change="orgCheck">
                        <div class="right-info flex-box">
                          <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
                          {{item.organization_name}}
                          <span>（{{item.employee_num}}人）</span>
                        </div>
                      </Checkbox>
                    </label>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="最近选择" tab="tab2" name="name2">
              <div class="tab-content-2"></div>
            </TabPane>
          </Tabs>
        </div>
        <div class="selecte-modal-right">
          <div class="s-r-header flex-box" v-if="orgNum">
            <div class="s-r-header-left flex-box">
              <div class="s-r-h-title mr12">已选：</div>
              <div class="s-r-h-detail">
                <span v-if="orgNum">部门{{orgNum}}个</span>
                <Icon
                  type="md-close-circle"
                  class="pointer"
                  size="14"
                  @click="changeAllStatus(false)"
                />
              </div>
            </div>
          </div>
          <div class="s-r-list">
            <div
              class="s-r-l-item"
              v-for="(item,index) in orgList"
              :key="index"
              v-if="item.checked"
            >
              <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
              <div class="s-r-l-item-name">
                <span class="ellipse">{{item.organization_name}}</span>
              </div>
              <div class="close-right-icon">
                <Icon type="md-close" @click="delSelect(index,'org')" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <!-- <span>没有找到想要的项目？ </span>
            <span class="ml12"><a href="">去添加项目</a></span>-->
          </div>
          <div class="m-c-right">
            <Button @click="cancelSelect" class="no-border-btn">取消</Button>
            <Button class="save-btn-green" @click="confirmSelect">确认</Button>
          </div>
        </div>
      </div>
    </Modal>

    <!-- modal -->

  </div>
</template>
<script>
import { attendance,personnel  } from "@/apis";
import http from "@/utils/http";
export default {
  name: "list",
  data() {
    return {
      confirmModal: true,
       selectModal: false,
      orgList: [],
      orgNum: 0,
      all: false,
      currentOrg: "选择部门",
      employee_name: "", //筛选的name
      loading1: false,
      nameOptions: [],
      selectDate:"",
      columns: [
        {
          title: " ",
          key: "avatar",
          width: "60",
          render: (h, params) => {
            return h("div", [
              h("img", {
                class: "avatar-table",
                attrs: {
                  src:
                    ""
                }
              })
            ]);
          }
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "工号",
          key: "age"
        },
        {
          title: "部门",
          key: "province"
        },
        {
          title: "岗位",
          key: "city"
        },
        {
          title: "工作性质",
          key: "city"
        },
        {
          title: "成员姓名",
          key: "city"
        },
        {
          title: "成员关系",
          key: "city"
        },
        {
          title: "工作单位",
          key: "city"
        },

        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                "快速编辑"
              )
            ]);
          }
        }
      ],
      openTableTitle: false,
      rightCardCloseStatus: false,
      list:[],
      tableLoading: false
    };
  },
  methods: {
    triggerTableTitle() {
      this.openTableTitle = true;
    },
    cancleTableTitle() {
      this.openTableTitle = false;
    },
    saveTableTitle() {
      this.openTableTitle = false;
    },
    closeRightCard() {
      this.rightCardCloseStatus = false;
    },
    openRightCard(a, b) {
      this.rightCardCloseStatus = true;
    },
    multiEditing() {
      console.log(1);
      console.log(this.columns[0].type);
      if (!this.columns[0].type && this.columns[0].type !== "selection") {
        this.columns.unshift({
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        });
      } else {
        this.columns.shift();
      }
    },
    sync() {
      const title = "重新同步考勤人员";
      const content = "<p></p>确认同步后，将重新同步本月的考勤员工数据，包括新入职、转正和离职的员工信息。请确认是否重新同步本月考勤人员？</p>";
      this.$Modal.confirm({
        title: title,
        content: content,
        onOk: () => {
                        console.log("ok");
                    },
        onCancel: () => {
                        console.log("cancle");
                    }
      });
    },
     // 获取考勤详情
    getList(){
      this.tableLoading = true;
       let organization_id =[];
      this.orgList.forEach(e => {
        if (e.checked) {
          organization_id.push(e.organization_id);
        }
      });
      http.get(attendance.workattendancelist,{
         params:{
          organization_id:organization_id.join(","),
          name:this.employee_name,
          date:this.selectDate,
        }
      }).then( res=>{
        this.list = res.data.list.data ;
        this.tableLoading = false;
      })
    },
    dateChange(e){
      console.log(e);
      this.selectDate = e;
      this.getList();
    },
    clearDate(e){
      this.selectDate = "";
      this.getList();
    },
    getOrg() {
      this.$getOrgList().then(res => {
        this.orgList = res.data.list || [];
      });
    },
    confirmSelect() {
      console.log(2222);
      let orgName = [];
      this.orgList.forEach(e => {
        if (e.checked) {
          orgName.push(e.organization_name);
        }
      });
      this.currentOrg = orgName.join(",") || "选择部门";
      this.selectModal = false;
      console.log(orgName);
      if (orgName.length) {
        this.getList(); //更新列表数据
      }
    },
    cancelSelect() {
      this.selectModal = false;
    },
    orgCheck(e, index) {
      //选择组织
      this.updateOrgNum();
    },
    changeAllStatus(type) {
      //清除或者全选
      this.orgList.forEach(e => {
        e.checked = type;
      });

      // 更新数据
      this.updateOrgNum();
      if (!type) {
        // this.orgNames = "";
        this.all = false;
      }
    },
    selectAll(e) {
      this.all = e;
      this.changeAllStatus(e);
    },
    updateOrgNum() {
      let num = 0;
      this.orgList.forEach(e => {
        if (e.checked) {
          num++;
        }
      });
      if (this.orgList.length == num) {
        this.all = true;
      } else {
        this.all = false;
      }
      this.orgNum = num;
    },
    selectOrg() {
      this.selectModal = true;
    },
    searchByName(query) {
      if (query !== "") {
        this.loading1 = true;
        let _this = this;
        http
          .get(personnel.employeelist, {
            params: {
              name: query
            }
          })
          .then(res => {
            let list = res.data.list.data || [];
            let temp = [];
            list.forEach(e => {
              temp.push({
                value: e.name,
                label: e.name
              });
            });
            _this.loading1 = false;
            _this.nameOptions = temp;
          });
      }
    },
    addSelectName(a, b) {
      this.getList(); //更新筛选列表
    },
    clearName() {
      this.employee_name = "";
      this.getList();
    },

  },
  mounted() {
    this.getList();
    this.getOrg();
  },
};
</script>
<style lang="scss" scoped src="./index.scss"></style>